<template>
  <div class="tab-bar">
    <router-link
      tag="span"
      v-for="(o,i) in tabs"
      :key="i"
      class="tab"
      :to="o.to"
      :replace="true"
    >
      <i class="icon-normal" :style="{backgroundImage:`url('${o.icon}')`}"></i>
      <i class="icon-active" :style="{backgroundImage:`url('${o.iconActive}')`}"></i>
      <b class="text">{{o.text}}</b>
    </router-link>
  </div>
</template>

<script>
export default {
  name: 'tab-bar',
  props: {
    tabs: {
      type: Array,
      required: true
    }
  }
}
</script>

<style lang="stylus">
$base-w = 50px;
$base-h = 50px;
$scale = 0.5;

.tab-bar {
  display: flex;
  justify-content: space-around;
  background-color: #fff;
  border-top: 1px solid $border-color;

  .tab {
    padding: 0.5em 1em;
    text-align: center;

    .icon-normal, .icon-active {
      width: $scale * $base-w;
      height: $scale * $base-h;
      background: center / cover no-repeat;
    }

    .icon-normal {
      display: inline-block;
    }

    .icon-active {
      display: none;
    }

    .text {
      display: block;
      color: $font-gray;
      font-size: 14px;
    }
  }

  .tab.linked {
    .icon-normal {
      display: none;
    }

    .icon-active {
      display: inline-block;
    }

    .text {
      color: $font-color;
    }
  }
}
</style>
